<template>
  <div class="login flex-column flex-justify-center flex-align-center m0 b0">
    <a-image style="width: 17vw; height: 10vw; margin-bottom: 50px" :src="djiLogo" />
    <p class="fz35 pb50" style="color: #2d8cf0">虹湾威鹏飞行器云平台</p>
    <a-form layout="inline" :model="formState" class="flex-row flex-justify-center flex-align-center">
      <a-form-item>
        <a-input v-model:value="formState.userName" placeholder="Username">
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="formState.passWord" type="password" placeholder="Password">
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button class="m0" type="primary" html-type="submit" :disabled="loginBtnDisabled" @click="onSubmit"> 登录 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import djiLogo from '@/assets/icons/dji_logo.png'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { reactive, computed, UnwrapRef } from 'vue'
import { login, LoginBody } from '@/api/manage'
import { getRoot } from '@/root'
import { ELocalStorageKey, ERouterName, EUserType } from '@/types'
import { sessionStorage } from '@/utils/storage'

import router from '@/router'

const root = getRoot()

const formState: UnwrapRef<LoginBody> = reactive({
  userName: '虹湾威鹏',
  passWord:
    // 'aao7modvwU5WXTKTfO+BgVj5W32kHggMAe8XDiGBm8qhjBfCD5H6YZlc8fHy94kNAxPU6AGzbsGNfdX6FlMrz1ShoTKfxeQPMleuGYIRWKpNWuVT8oewaxyfETQxkXqGUcC+K0eRJgqCJH6brf0Asxx2e6f4m09sqq7smpHoGAs=',
    'MTQCfyMseXylUbp5808ndk1dU0UviIZQShnPEmAj5I9qQ2ua038g1J+q0Pds1vWRbZOWpsiXtzA6Ndhw8sRqVLuJqmSRbmYCTRxeRcQi8Nlbwah1Obt0wqiUUREgDVWlk0ZFwtvsM98dJb/xnVj4B0/NHIfx3fOfAkYs7OOKDVs=',
  flag: EUserType.Web
})

const loginBtnDisabled = computed(() => {
  return !formState.userName || !formState.passWord
})

const onSubmit = async (e: any) => {
  console.log(formState, 'formState')
  const result = await login(formState)
  console.log(result, 'login result')

  if (result.code === 1) {
    sessionStorage.set(ELocalStorageKey.Token, result.data.token)
    sessionStorage.set(ELocalStorageKey.WorkspaceId, result.data.workspaceId)
    sessionStorage.set(ELocalStorageKey.Username, result.data.userName)
    sessionStorage.set(ELocalStorageKey.UserId, result.data.userId)
    sessionStorage.set(ELocalStorageKey.Flag, EUserType.Web.toString())
    root.$router.push(ERouterName.TSA)
  } else {
    message.error(result.message)
  }
}
</script>

<style lang="scss" scoped>
// @import '/@/styles/index.scss';
.login {
  background-color: $dark-highlight;
  height: 100vh;
}
</style>
